<script setup name="pageNavigation">
import { watch, ref } from 'vue'
import router from '../router/index'
import { useKeepAliveStore } from '../store/index'
import { storeToRefs } from 'pinia'

const breadcrumbList = ref([])
const clickBreadcrumb = (item) => {
  if (!item.meta.isPage) {
    return
  } else {
    router.push(item.path)
  }
}
const currentPath = ref('')
const initbreadcrumbList = () => {
  breadcrumbList.value = router.currentRoute.value.matched
  let path = router.currentRoute.value.name
  currentPath.value = path
}
// 监听路由变化
watch(
  () => router,
  () => {
    initbreadcrumbList()
  },
  { deep: true, immediate: true }
)
const { tags } = storeToRefs(useKeepAliveStore())
const { removePage } = useKeepAliveStore()
const tagClick = (key) => {
  router.push('/' + key)
}
const handleDeleteTag = (key) => {
  // 移除当前keep-alive上的缓存
  removePage(key)
}
</script>

<template>
  <div class="navigation">
    <div class="breadcrumb">
      <a-breadcrumb>
        <a-breadcrumb-item
          v-for="item in breadcrumbList"
          @click="clickBreadcrumb(item)"
          style="cursor: pointer"
        >
          {{ item.meta.title }}
        </a-breadcrumb-item>
      </a-breadcrumb>
    </div>
    <div class="opened-page" style="background-color: white">
      <a-tabs
        :editable="true"
        @delete="handleDeleteTag"
        :hide-content="true"
        auto-switch
        :active-key="currentPath"
        @tab-click="tagClick"
      >
        <a-tab-pane
          v-for="(item, index) of tags"
          :key="item.name"
          :title="item.title"
          :closable="true"
        >
        </a-tab-pane>
      </a-tabs>
    </div>
  </div>
</template>

<style scoped lang="less">
.navigation {
  background-color: white;
  display: flex;
  flex-direction: column;
  .breadcrumb {
    padding: 10px;
    margin-left: 10px;
  }
  .opened-page {
    margin-left: 10px;
  }
}
</style>
